<template>
    <div class="system-dataDic-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="table-search-container">
                <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px" class="table-form">
                    <el-row>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                            <el-form-item label="字典编码">
                                <el-input v-model="state.ruleForm.dicCode" style="width: 100%"
                                    placeholder="字典编码，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="字典名称">
                                <el-input v-model="state.ruleForm.dicName" style="width: 100%"
                                    placeholder="字典名称，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="字典项编码">
                                <el-input v-model="state.ruleForm.dicItemCode" style="width: 100%"
                                    placeholder="字典项编码，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="字典项名称">
                                <el-input v-model="state.ruleForm.dicItemName" style="width: 100%"
                                    placeholder="字典项名称，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="字典项值">
                                <el-input v-model="state.ruleForm.dicItemValue" style="width: 100%"
                                    placeholder="字典项值，模糊查询"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="状态">

                                <el-select clearable v-model="state.ruleForm.status" placeholder="全部" style="width: 100%">
                                    <el-option v-for="item in state.statusList" :key="item.dicItemValue"
                                        :label="item.dicItemName" :value="item.dicItemValue"></el-option>
                                </el-select>

                            </el-form-item>
                        </el-col>


                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                            <el-form-item label="所属服务">

                                <el-select clearable v-model="state.ruleForm.belongMicroService" placeholder="全部"
                                    style="width: 100%">
                                    <el-option v-for="item in state.microServiceList" :key="item.dicItemValue"
                                        :label="item.dicItemName" :value="item.dicItemValue" />
                                </el-select>

                            </el-form-item>
                        </el-col>

                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                    <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                    <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                </div>
                                <div>
                                    <el-button size="default" type="primary" @click="refresh()">查询
                                    </el-button>
                                    <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-card shadow="hover" class="layout-padding-auto">
                <div class="bar_tools">
                    <el-button-group class="ml-4">
                        <el-button type="primary" size="default" @click="handleAdd()">添加</el-button>
                        <el-button type="primary" size="default" @click="handleRefreshCache()">刷新缓存</el-button>
                    </el-button-group>
                </div>


                <el-table size="default" :data="state.tableData" row-key="dicMasterId" :expand-row-keys="state.expandedRowKeys"
                    @expand-change="funcExpand" style="width: 100%">

                    <el-table-column type="expand">
                        <template #default="scope2">
                            <el-card>
                                <el-form>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="修改日期">{{
                                                scope2.row.updateDate
                                            }}</el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="创建日期">{{
                                                scope2.row.createDate
                                            }}</el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-card>
                            <el-card>
                                <el-table size="default" :data="scope2.row.items" border="">
                                    <el-table-column label="序号" prop="seq" width="50"></el-table-column>
                                    <el-table-column label="字典项编码" prop="dicItemCode"></el-table-column>
                                    <el-table-column label="字典项名称" prop="dicItemName"></el-table-column>
                                    <el-table-column label="字典项值" prop="dicItemValue"></el-table-column>
                                    <el-table-column label="更新日期" prop="updateDate"></el-table-column>
                                    <el-table-column label="语言" prop="language" width="100"></el-table-column>
                                    <el-table-column label="扩展属性1" prop="extAttribut1"></el-table-column>
                                    <el-table-column prop="status" label="状态" width="140">
                                        <template #default="scope">
                                            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">{{
                                                getStatus(scope.row.status)
                                            }}</el-tag>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-card>

                        </template>
                    </el-table-column>

                    <el-table-column prop="dicCode" label="数据字典编码"></el-table-column>
                    <el-table-column prop="dicName" label="数据字典名称"></el-table-column>
                    <el-table-column prop="remark" label="备注"></el-table-column>

                    <el-table-column prop="belongMicroService" label="所属服务" width="140">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">{{
                                getBelongMicroService(scope.row.belongMicroService)
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="140">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">{{
                                getStatus(scope.row.status)
                            }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="primary" size="default" title="修改"
                                    @click="handlerEdit(scope.$index, scope.row)">
                                    编辑
                                </el-button>
                                <el-button @click="handlerAcitiveOrInactive(scope.$index, scope.row)"
                                    :type="scope.row.status === 1 ? 'danger' : 'success'" size="default"
                                    :title="scope.row.status == 1 ? '失效' : '生效'">
                                    {{ scope.row.status == 1 ? "失效" : "生效" }}
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.ruleForm.page" background
                v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="state.ruleForm.total">
            </el-pagination>
        </el-card>

        <dicDialog ref="dicDialogRef" @refresh="refresh" />

    </div>
</template>

<script setup lang="ts" name="dataDic">

import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
// 导入接口
import { useSysApi } from "../../../api/sys";

// 引入组件
const dicDialog = defineAsyncComponent(() => import('/@/views/system/dicManager/dialog.vue'));
const dicDialogRef = ref();
const state = reactive({
    isToggle: false,
    tableData: [],
    expandedRowKeys: [] as any,
    statusList: [] as any,
    microServiceList: [] as any,
    ruleForm: {
        page: 1,
        limit: 10,
        total: 0,
        dicCode: "", dicName: "", status: "", belongMicroService: "", dicItemCode: "", dicItemName: "",
        dicItemValue: ""
    },
});

const remove = (array: any[], val: any) => {
    const index = array.indexOf(val)
    if (index > -1) {
        array.splice(index, 1)
        return true
    }
    return false
}

const funcExpand = async (row: any, expands: any) => {
    if (!remove(state.expandedRowKeys, row.dicMasterId)) {
        state.expandedRowKeys.push(row.dicMasterId)
    }
    let items = await useSysApi().queryDicItemsById(row.dicMasterId);
    row["items"] = items;
}


/**
 * 添加数据字典
 */
const handleAdd = () => {
    dicDialogRef.value.openDialog("add");
}


const handlerEdit = (index: any, row: any) => {
    dicDialogRef.value.openDialog("edit", row);
}

/**
 * 刷新缓存
 */
const handleRefreshCache = async () => {
    try {
        await useSysApi().dicRefreshCache();
        ElMessage.success("操作成功");
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}



/**
 * 修改状态
 * @param index 
 * @param row 
 */
const handlerAcitiveOrInactive = async (index: any, row: any) => {
    let record = {};
    let status;
    record["dicMasterId"] = row.dicMasterId;
    if (row.status == 1) {
        status = 0;
    } else {
        status = 1;
    }
    record["status"] = status;

    try {
        await useSysApi().dicSaveOrUpdate([record]);
        row.status = status;
        ElMessage.success("操作成功");
    } catch (error: any) {
        ElMessage.error(error.msg);
    }

}



const getStatus = (str: string) => {
    let strTemp = "";
    state.statusList.forEach((element: any) => {
        if (element.dicItemValue == str) {
            strTemp = element.dicItemName;
        }
    });
    return strTemp;
}

const getBelongMicroService = (str: string) => {
    let strTemp = "";
    state.microServiceList.forEach((element: any) => {
        if (element.dicItemValue == str) {
            strTemp = element.dicItemName;
        }
    });
    return strTemp;
}

const handleResetSearch = () => {
    state.ruleForm = {
        page: 1,
        limit: 10,
        total: 0,
        dicCode: "", dicName: "", status: "", belongMicroService: "", dicItemCode: "", dicItemName: "",
        dicItemValue: ""
    };
    queryPagedSystemDic();
}


const refresh = () => {
    state.expandedRowKeys = [];
    queryPagedSystemDic();
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.ruleForm.limit = val;
    queryPagedSystemDic();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.ruleForm.page = val;
    queryPagedSystemDic();
};


const queryPagedSystemDic = async () => {
    try {
        let vo = {
        };

        if (state.ruleForm.dicCode) vo["dicCode"] = state.ruleForm.dicCode;
        if (state.ruleForm.dicName) vo["dicName"] = state.ruleForm.dicName;
        if (state.ruleForm.status) vo["status"] = state.ruleForm.status;
        if (state.ruleForm.belongMicroService) vo["belongMicroService"] = state.ruleForm.belongMicroService;
        if (state.ruleForm.dicItemCode) vo["dicItemCode"] = state.ruleForm.dicItemCode;
        if (state.ruleForm.dicItemName) vo["dicItemName"] = state.ruleForm.dicItemName;
        if (state.ruleForm.dicItemValue) vo["dicItemValue"] = state.ruleForm.dicItemValue;
        let listTemp = await useSysApi().queryPagedSystemDic(
            state.ruleForm.page, state.ruleForm.limit, vo
        );
        state.ruleForm.total = listTemp.total;
        state.tableData = listTemp.list;
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}


const selectDicItemsByDicCode = async () => {
    state.statusList = await useSysApi().selectDicItemsByDicCode("commStatus", "General");
    state.microServiceList = await useSysApi().selectDicItemsByDicCode("microServiceList", "General");
}


// 页面加载时
onMounted(() => {
    // 获取字典状态编码
    selectDicItemsByDicCode();
    queryPagedSystemDic();
});




</script>




<style scoped lang="scss">
// .el-form .el-form-item:last-of-type {
//     margin-bottom: 22px !important;
// }

.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}


.system-dataDic-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
